<template>
  <div style="width: 100%; height: 100%">
    <el-skeleton
    :count="9" 
    animated
      style="
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        grid-column-gap: 12px;
        grid-row-gap:12px;
      "
    >
      <template #template>
         <div style="height: 180px;border-radius: 15px;overflow: hidden;background-color: #ffffff;">
            <el-skeleton-item variant="image" style="width: 100%; height: 120px" />
          <div style="padding: 0 8px;width: 100%;box-sizing: border-box;">
            <el-skeleton-item variant="p" style="width: 100%; height: 16px;margin-top: 12px;" />
            <el-skeleton-item variant="p" style="width: 100%; height: 16px;" />
          </div>
         </div>
      </template>
    </el-skeleton>
  </div>
</template>
<script setup name="IndexSkeleton"></script>
